<template>
    <div>
        <NavTop/>
        <div style="text-align: center; width: 50%; margin: auto; height: 80vh">
            <div class="block text-center">
                 <h3>商品详细：</h3>
                <el-carousel height="500px" motion-blur>
                     

                    <el-carousel-item v-for="(imgUrl, index) in list.imglist" :key="index">
                      
                         <img :src="imgUrl" alt="图片描述" class="img" style="height: 90%;" >
                    </el-carousel-item>
                </el-carousel>
                <br>
                {{ list.name }}:{{ list.desc }}
            </div><br>
            <el-input v-model="num" style="width: 100px" placeholder="请输入数量" />&nbsp;&nbsp;张/{{ list.price }}元&nbsp;
            <el-button type="danger" circle @click="num--" :disabled="num===0">-</el-button>&nbsp;
            <el-button type="primary" circle @click="num++">+</el-button><br><br>
            <el-button type="success" round @click="cartAdd()" :disabled="num===0">加入购物车</el-button>
            &nbsp;
            <el-button type="warning" round @click="orderAdd()" :disabled="num===0">立即购买</el-button><br><br>
            
        </div>
        
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import { ElMessageBox } from 'element-plus';
import { userGoodsStore } from '@/store/good'


export default {
    props:['query'],
    data() {
        return {
            list:[],
            num:0,
            store:userGoodsStore(),
            time: new Date()
        }
    },
    methods:{
        cartAdd() {
            ElMessageBox.alert('您成功添加至购物车', '温馨提示', {
                confirmButtonText: 'OK',
            })

            this.store.cartAdd({
                id:this.list.id,
                name:this.list.name,
                price:this.list.price,
                num:this.num,
                total:this.num *this.list.price
            })
          console.log(this.num *this.list.price)
        },
        orderAdd() {
            ElMessageBox.alert('您已加入订单，请前往订单页进行付款', '温馨提示', {
                confirmButtonText: 'OK',
            });
            console.log(this.list)
            this.list.orderID = this.time.getFullYear().toString() + (this.time.getMonth() + 1).toString() + this.time.getDate().toString() + Math.random().toString().slice(2,10)
            // console.log(this.data.orderID)
            
            //把相关的数据添加到store中的订单
            this.store.orderAdd({
                orderID:this.list.orderID,
                time:this.time,
                num:this.num,
                sum:this.num * this.list.price,
                isOrdered:false, //记录是否完成支付
                child:[
                    {
                        id:this.list.id,
                        name:this.list.name,
                        price:this.list.price,
                        num:this.num,
                        total:this.num * this.list.price
                    }
                ],

            })
        }
    },
    components:{
        NavTop
    },
    mounted() {
        this.list = this.$route.query
    },
    
}
</script>

<style>

</style>